<script setup>
import { reactive, ref } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { debounce } from 'radash'
import { useSystemSettings } from '../../store/SystemSetting'
import { PageUtil } from '../../utils/PageUtil'
import { useDictionaryStore } from '../../store/DictionaryStore'
import { useLoading } from '../../store/LoadingStore'
import LoadingFooter from '../../components/LoadingFooter.vue'
import DialogItemList from './coms/DialogItemList.vue'
import CustomCheckboxGroup from '../../components/CustomCheckboxGroup.vue'
import CustomCheckboxItem from '../../components/CustomCheckboxItem.vue'

const loadingStore = useLoading()
const systemStore = useSystemSettings()
const dictStore = useDictionaryStore()

const dialogParams = reactive({})

const dataColumns = ref([
  { label: '编号', prop: 'bwa_code' },
  { label: '名称', prop: 'bwa_name' },
  { label: '负责人', prop: 'bwa_user_name' },
  { label: '电话', prop: 'bwa_user_tel' },
  { label: '备注', prop: 'remark' }
])

const list = reactive({
  rows: [],
  total: 0,
  selection: []
})

const queryParams = reactive({
  limit: 1,
  size: 20,
  searchKey: ''
})

const dict = reactive({
  bpa_label: {}
})

const debounceQuery = debounce({
  delay: 200
}, () => {
  loadingStore.SET_LOADING()
  systemStore.getBwlList({
    ...queryParams
  }).then((res) => {
    let {
      Rows = [], Total = 0
    } = res || {}
    if (loadingStore.isLoadMore(list.rows, Total)) {
      list.rows = list.rows.concat(Rows)
    } else {
      list.rows = Rows
    }
    list.total = Total
    loadingStore.FINISH_ALL()
    uni.stopPullDownRefresh()
  })
})

const queryList = function() {
  debounceQuery()
}

const searchList = function() {
  loadingStore.NEW_LIST()
  queryParams.limit = 1
  queryList()
}

const loadMore = function() {
  if (loadingStore.ILOADING) {
    return
  }
  const { total = 0, rows = [] } = list
  if (loadingStore.hasMore(rows, total)) {
    queryParams.limit += 1
    debounceQuery()
  }
}
const onChecked =function(e){
  const {detail:{value}} = e
  list.selection = value
}
const confirm = function() {
  const { __eventId, valueKey } = dialogParams || {}
  const data = []
  const { selection = [], rows = [] } = list || {}
  rows.map(item => {
    if (selection.includes(item[valueKey])) {
      data.push(item)
    }
  })
  uni.$emit((__eventId + '-item-select'), data)
}

onLoad((params) => {
  let _p = PageUtil.parseParam(params)
  Object.entries(_p).map(([k, v]) => {
    dialogParams[k] = v
  })
  loadingStore.NEW_LIST()
  queryList()
})

onReachBottom(() => {
  loadMore()
})
</script>

<template>
  <div class="page-warp h-f bg-grey-200">

    <div class="header-warp">
      <div class="sticky-headers sticky bg-white search">
        <div class="col input">
          <uni-easyinput
            prefixIcon="search"
            prefixIconStyle="font-size: 22px;color: #909399"
            clearable
            placeholder="请输入关键字"
            v-model="queryParams.bpa_code"
          />

        </div>
        <div class="col">
          <button class="uni-btn uni-btn-small" type="primary"
                  @click="searchList">
            搜索
          </button>
        </div>
      </div>
    </div>
    <div class="m-warp">
      <div class="m-content scroll-page">

        <checkbox-group
          @change="onChecked"
        >
            <dialog-item-list
              :columns="dataColumns"
              :data="list.rows"
              row-key="bwa_id"
              :selected="list.selection"
            >
              <template #type="{value}">
                <checkbox class="checkbox" :value="value"></checkbox>
              </template>
            </dialog-item-list>
        </checkbox-group>


          <loading-footer
            :data="list.rows"
            :total="list.total"
            :loading="loadingStore.ILOADING"
            :h-offset="44"
          />

      </div>
    </div>


    <div class="form-footer">
      <div class="footer-warp">
        <div class="footer__btn">
          <div class="btn">
            <button class="uni-btn"
                    type="primary"
                    @click="confirm"
                    :disabled="loadingStore.ILOADING"
                    :loading="loadingStore.ILOADING"
            >
              确定
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import '@/assets/PageCommon.scss';

.page-warp {
  .header-warp {

    .form-warp {
      padding: 0 12px;
      padding-right: 0;
    }
  }

  .f-warp {
    .form-warp {
      padding-bottom: 12px;
    }
  }

  .form-footer {
    height: 60px;
    position: relative;
    z-index: 2;
  }
}
</style>
